<template>
  <load v-if="this.$store.state.isLoad"></load>
  <div class="classify" v-else-if="!this.$store.state.isLoad">
    <div class="label-row">
      <div
        class="classify-label"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) in topClassify"
        :key="index"
        @click="getAc(index, item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="l-row" v-if="isHide">
      <div
        class="classify-label"
        :class="{ active: activeIndex1 === index }"
        v-for="(item, index) in firstBottom"
        :key="index"
        @click="getAc1(index, item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="l-row" v-if="isHide">
      <div
        class="classify-label"
        :class="{ active: activeIndex2 === index }"
        v-for="(item, index) in secondBottom"
        :key="index"
        @click="getAc2(index, item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="l-row" v-if="isHide">
      <div
        class="classify-label"
        :class="{ active: activeIndex3 === index }"
        v-for="(item, index) in thirdBottom"
        :key="index"
        @click="getAc3(index, item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="l-row">
      <div
        class="classify-label"
        :class="{ active: activeIndex4 === index }"
        v-for="(item, index) in fourthBottom"
        :key="index"
        @click="getAc4(index, item.id)"
      >
        {{ item.name }}
      </div>

      <div class="sift" @click="getShow">
        <van-icon name="arrow-down" :class="{ offset: isHide }" />
        筛选
      </div>
    </div>

    <div class="classifyComic" v-if="listData">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        v-if="listData.length > 0 ? !isShow : isShow"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          @click="goDetail(item.season_id)"
        >
          <classifyCartoon
            v-if="item"
            :img="item.vertical_cover"
            :title="item.title"
            :text="
              item.last_ord == item.total
                ? '[完结]共 ' + item.total + ' 话'
                : '更新至 ' + item.last_short_title + ' 话'
            "
          >
          </classifyCartoon>
        </div>
      </van-list>
      <div class="emtpy" v-if="isShow">
        <div class="emtpy-text">
          <div>无符合条件的漫画</div>
          <div>请试试其他索引条件</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import load from "../components/Load.vue";
import classifyCartoon from "../components/ClassifyCartoon.vue";
export default {
  name: "ClassIfy",
  data() {
    return {
      topClassify: [],
      firstBottom: [],
      secondBottom: [],
      thirdBottom: [],
      fourthBottom: [],
      isHide: false,
      activeIndex: 0,
      activeIndex1: 0,
      activeIndex2: 0,
      activeIndex3: 0,
      activeIndex4: 0,
      id: -1,
      id1: -1,
      id2: -1,
      id3: 0,
      id4: -1,
      list: [],
      listData: [],
      loading: false,
      finished: false,
      isShow: false,
    };
  },
  components: {
    classifyCartoon,
    load,
  },
  created() {
    // console.log(this.list);
    this.axios({
      method: "get",
      url: "/AllLabel",
    })
      .then((res) => {
        this.topClassify = res.data.data.styles;
        this.firstBottom = res.data.data.areas;
        this.secondBottom = res.data.data.status;
        this.thirdBottom = res.data.data.prices;
        this.fourthBottom = res.data.data.orders;
        this.topClassify.unshift({ id: -1, name: "全部" });
        this.firstBottom.unshift({ id: -1, name: "全部" });
        this.secondBottom.unshift({ id: -1, name: "全部" });
        this.thirdBottom.unshift({ id: 0, name: "全部" });

        this.topClassify.find((v, i) => {
          if (v.id == this.aid) {
            this.activeIndex = i;
            return true;
          }
        });
        this.firstBottom.find((v, i) => {
          if (v.id == this.bid) {
            this.activeIndex1 = i;
            return true;
          }
        });
        this.secondBottom.find((v, i) => {
          if (v.id == this.cid) {
            this.activeIndex2 = i;
            return true;
          }
        });
        this.thirdBottom.find((v, i) => {
          if (v.id == this.did) {
            this.activeIndex3 = i;
            return true;
          }
        });
        this.fourthBottom.find((v, i) => {
          if (v.id == this.eid) {
            this.activeIndex4 = i;
            return true;
          }
        });
      })
      .catch((err) => {
        console.log("err ==>", err);
      });
    this.request();
    this.aid = this.$route.query.style_id;
    this.bid = this.$route.query.area_id;
    this.cid = this.$route.query.is_finish;
    this.did = this.$route.query.order;
    this.eid = this.$route.query.is_free;

    this.id = this.aid;
    this.id1 = this.bid;
    this.id2 = this.cid;
    this.id3 = this.did;
    this.id4 = this.eid;
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id: id,
        },
      });
    },
    getShow() {
      this.isHide = !this.isHide;
    },
    getAc(index, id) {
      if (this.activeIndex === index) {
        return;
      }
      this.activeIndex = index;
      // console.log("id==>", id);
      this.id = id;
      this.$router.push({
        name: "ClassIfy",
        query: {
          style_id: this.id,
          area_id: this.id1,
          is_finish: this.id2,
          order: this.id3,
          is_free: this.id4,
        },
      });
    },
    getAc1(index, id1) {
      if (this.activeIndex1 === index) {
        return;
      }
      this.activeIndex1 = index;
      // console.log("id1==>", id1);
      this.id1 = id1;
      this.$router.push({
        name: "ClassIfy",
        query: {
          style_id: this.id,
          area_id: this.id1,
          is_finish: this.id2,
          order: this.id3,
          is_free: this.id4,
        },
      });
    },
    getAc2(index, id2) {
      if (this.activeIndex2 === index) {
        return;
      }
      this.activeIndex2 = index;
      this.id2 = id2;
      // console.log("id2==>", id2);
      this.$router.push({
        name: "ClassIfy",
        query: {
          style_id: this.id,
          area_id: this.id1,
          is_finish: this.id2,
          order: this.id3,
          is_free: this.id4,
        },
      });
    },
    getAc3(index, id3) {
      if (this.activeIndex3 === index) {
        return;
      }
      this.activeIndex3 = index;
      // console.log("id3==>", id3);
      this.id3 = id3;
      this.$router.push({
        name: "ClassIfy",
        query: {
          style_id: this.id,
          area_id: this.id1,
          is_finish: this.id2,
          order: this.id3,
          is_free: this.id4,
        },
      });
    },
    getAc4(index, id4) {
      if (this.activeIndex4 === index) {
        return;
      }
      this.activeIndex4 = index;
      this.id4 = id4;
      // console.log("id4==>", id4);
      this.$router.push({
        name: "ClassIfy",
        query: {
          style_id: this.id,
          area_id: this.id1,
          is_finish: this.id2,
          order: this.id3,
          is_free: this.id4,
        },
      });
    },
    request() {
      this.axios({
        method: "get",
        url: "/ClassPage",
        params: {
          style_id: this.$route.query.style_id,
          area_id: this.$route.query.area_id,
          is_finish: this.$route.query.is_finish,
          order: this.$route.query.order,
          is_free: this.$route.query.is_free,
          page_size: 1000,
        },
      })
        .then((res) => {
          // console.log("res ==>", res);
          this.listData = res.data.data;
          // console.log("this.listData==>", this.listData);
          // console.log("this.list==>", this.list);
          if (this.listData.length < 9) {
            for (let i = 0; i < this.listData.length; i++) {
              this.list.push(this.listData[i]);
            }
          } else {
            for (let i = 0; i < 9; i++) {
              this.list.push(this.listData[i]);
            }
          }
        })
        .catch((err) => {
          console.log("err ==>", err);
        });
    },
    onLoad() {
      setTimeout(() => {
        for (let i = 0; i < 9; i++) {
          this.list.push(this.listData[this.list.length + 1]);
        }
        // console.log("this.list==>", this.list);
        // 加载状态结束
        this.loading = false;
        
        // 数据全部加载完成
        if (this.list.length >= this.listData.length) {
          this.finished = true;
          Toast("没有更多了");
        }
      }, 1000);
    },
  },
  watch: {
    $route: {
      handler() {
        this.request();
        this.aid = this.$route.query.style_id;
        this.bid = this.$route.query.area_id;
        this.cid = this.$route.query.is_finish;
        this.did = this.$route.query.order;
        this.eid = this.$route.query.is_free;
        this.list.length = 0;
        if(this.listData.length > 0){
          this.isShow = false
        }else{
          this.isShow = true
        }
        this.$store.state.isLoad = true
      },
    },
  },
};
</script>

<style lang="less" scoped>
.label-row {
  margin: 10px auto;
  width: 343px;
  height: 97px;
  //   background-color: skyblue;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .classify-label {
    padding-top: 5px;
    margin-left: 20px;
    font-size: 12px;
    display: block;
    height: 20px;
    color: #6c727e;
  }
}
.l-row {
  margin: 0 auto;
  width: 343px;
  height: 32px;
  display: flex;
  .sift {
    margin-left: 99px;
    color: #6c727e;
  }
  .classify-label {
    // padding-top: 5px;
    margin-left: 20px;
    font-size: 12px;
    display: block;
    height: 20px;
    color: #6c727e;
  }
}
.offset {
  transform: rotate(180deg);
}
.active {
  color: #fb7299 !important;
}
.classifyComic {
  // display: flex;
  // justify-content: space-evenly;
  // flex-wrap: wrap;
  .van-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-evenly;
    // overflow: hidden;
    // margin-left: 20px;
    ::v-deep .van-list__finished-text {
      margin: auto;
    }
    ::v-deep .van-loading {
      margin-left: 145px;
    }
    .classifycartoon{
      margin-left: 16px;
    }
  }
  .emtpy {
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-image: url(https://s1.hdslb.com/bfs/manga-static/manga-mobile/static/img/e4ad28da97f0aa7.png);
    margin: 5px auto;
    .emtpy-text {
      text-align: center;
      color: #a5c6ec;
    }
  }
}
</style>